/* 基础样式 */
body {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 25%, #faf5ff 50%, #f3e8ff 75%, #f0fdfa 100%);
    background-attachment: fixed;
}

/* 卡片渐变边框 */
.card-gradient {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
}

/* 自定义工具类 */
.content-auto {
    content-visibility: auto;
}

.image-drop-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    background: white;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.image-drop-zone:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #f0f9ff, #f8fafc);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1);
}

.image-drop-zone.active {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #dbeafe, #e0f2fe);
}

.param-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    background: white;
    font-size: 0.95rem;
}

.param-control:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    transform: translateY(-1px);
}

/* 按钮样式 */
/* 确保预览区父容器为相对定位（作为按钮的定位基准） */
/* 找到包裹预览区的外层容器（通常是包含标题和文件预览的div），添加相对定位 */
.card-gradient > div { /* 假设父容器是这个层级，可根据实际结构调整 */
    position: relative;
}

/* 按钮样式：固定在右上角 */
#select-file-btn {
    /* 绝对定位，相对于父容器右上角 */
    position: absolute;
    top: 1rem; /* 距离顶部1rem */
    right: 1rem; /* 距离右侧1rem */
    z-index: 10; /* 确保在其他内容上方 */

    /* 按钮尺寸和样式 */
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 5px 10px; /* 小尺寸按钮，不占用过多空间 */
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

#select-file-btn:hover {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    transform: translateY(-1px); /* 轻微上浮效果 */
}

.btn-gradient {
    background: linear-gradient(135deg, #3b82f6, #6366f1, #8b5cf6);
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-gradient:hover::before {
    left: 100%;
}

.btn-gradient:hover {
    background: linear-gradient(135deg, #2563eb, #4f46e5, #7c3aed);
    transform: translateY(-2px);
}

.btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
}
/* 播放模式按钮样式 */
#play-mode-btn {
    min-width: 120px;
    justify-content: center;
}
/* 自定义禁用状态的样式 */
.play-mode-btn-disabled {
    /* 灰色背景 */
    background-color: #2cbb45;
    /* 灰色文字 */
    color: #d51e1e;
    /* 去除hover效果（如果有） */
    cursor: not-allowed;
}

#play-mode-btn i {
    transition: transform 0.3s ease;
}

#play-mode-btn:hover i {
    transform: scale(1.1);
}

/* 在converter.css中添加 */
#preview-video {
    /* 确保视频控件不被遮挡 */
    z-index: 20;
}

#preview-video.playing + div {
    /* 播放时稍微降低覆盖层透明度，不影响观看 */
    opacity: 0.7;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
}

.btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    border: none;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-1px);
}

/* 复选框样式 */
.checkbox-container {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
    background: #f8fafc;
}

.checkbox-container:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
    transform: translateX(4px);
}

.checkbox-input {
    width: 20px;
    height: 20px;
    accent-color: #3b82f6;
}

.checkbox-label {
    margin-left: 0.75rem;
    cursor: pointer;
    flex: 1;
}

/* 滑块样式 */
.slider-custom::-webkit-slider-thumb {
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.slider-custom::-webkit-slider-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #e2e8f0;
    border-radius: 4px;
}

/* 自定义宽度类 */
.flex-2\/3 {
    flex: 0 0 66.666667%;
}

.w-1\/3 {
    width: 33.333333%;
}

/* 结果区域样式 */
.result-container {
    min-height: 400px;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
}

/* 底部固定大小滚动条 */
.horizontal-scroll-bottom {
    position: fixed;
    left: 2rem;
    right: 2rem;
    bottom: 1rem;
    height: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f8fafc;
    display: none;
    z-index: 10;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.scroll-content {
    height: 1px;
}

/* 固定滚动条样式 */
.horizontal-scroll-bottom::-webkit-scrollbar {
    height: 12px !important;
    width: 12px !important;
}

.horizontal-scroll-bottom::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 6px;
}

.horizontal-scroll-bottom::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 6px;
    border: 2px solid #f1f5f9;
    min-width: 30px;
    min-height: 12px;
}

.horizontal-scroll-bottom::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.horizontal-scroll-bottom::-webkit-scrollbar-button {
    width: 12px !important;
    height: 12px !important;
}

/* Firefox 滚动条样式 */
.horizontal-scroll-bottom {
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 #f1f5f9;
}

.result-content-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .image-drop-zone {
        height: 250px;
        min-height: 250px;
    }

    .result-container {
        min-height: 300px;
        padding: 1rem;
    }

    .horizontal-scroll-bottom {
        left: 1rem;
        right: 1rem;
        bottom: 0.5rem;
    }

    .btn-gradient, .btn-primary, .btn-secondary {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .flex-2\/3 {
        flex: 0 0 60%;
    }

    .w-1\/3 {
        width: 40%;
    }
}

#loading {
    display: none !important;
}